<template>
	<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
		<!-- 布局切换 -->
		<el-divider class="divider" content-position="center">
			<el-icon><Notification /></el-icon>
			布局切换
		</el-divider>
		<div class="layout-box">
			<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-vertical', themeConfig.layout == 'vertical' ? 'is-active' : '']"
					@click="changeLayout('vertical')"
				>
					<div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
					<el-icon v-if="themeConfig.layout == 'vertical'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-classic', themeConfig.layout == 'classic' ? 'is-active' : '']"
					@click="changeLayout('classic')"
				>
					<div class="layout-dark"></div>
					<div class="layout-container">
						<div class="layout-light"></div>
						<div class="layout-content"></div>
					</div>
					<el-icon v-if="themeConfig.layout == 'classic'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-transverse', themeConfig.layout == 'transverse' ? 'is-active' : '']"
					@click="changeLayout('transverse')"
				>
					<div class="layout-dark"></div>
					<div class="layout-content"></div>
					<el-icon v-if="themeConfig.layout == 'transverse'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
			<el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
				<div
					:class="['layout-item layout-columns', themeConfig.layout == 'columns' ? 'is-active' : '']"
					@click="changeLayout('columns')"
				>
					<div class="layout-dark"></div>
					<div class="layout-light"></div>
					<div class="layout-content"></div>
					<el-icon v-if="themeConfig.layout == 'columns'"><CircleCheckFilled /></el-icon>
				</div>
			</el-tooltip>
		</div>
		<br />

		<!-- 全局主题 -->
		<el-divider class="divider" content-position="center">
			<el-icon><ColdDrink /></el-icon>
			全局主题
		</el-divider>
		<div class="theme-item">
			<span>主题颜色</span>
			<el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary" />
		</div>
		<div class="theme-item">
			<span>暗黑模式</span>
			<SwitchDark></SwitchDark>
		</div>
		<div class="theme-item">
			<span>灰色模式</span>
			<el-switch v-model="themeConfig.isGrey" @change="changeGreyOrWeak($event, 'grey')" />
		</div>
		<div class="theme-item">
			<span>色弱模式</span>
			<el-switch v-model="themeConfig.isWeak" @change="changeGreyOrWeak($event, 'weak')" />
		</div>
		<br />

		<!-- 界面设置 -->
		<el-divider class="divider" content-position="center">
			<el-icon><Setting /></el-icon>
			界面设置
		</el-divider>
		<div class="theme-item">
			<span>导航栏激活风格</span>
			<el-radio-group v-model="themeConfig.activeStyle" size="small">
				<el-radio-button label="rect">矩形</el-radio-button>
				<el-radio-button label="round">圆角</el-radio-button>
			</el-radio-group>
		</div>
		<div class="theme-item" v-if="themeConfig.activeStyle === 'round'">
			<span>圆角值</span>
			<el-input-number
				v-model="themeConfig.menuRadius"
				controls-position="right"
				:min="0"
				:max="30"
				class="set-width"
				@change="changeMenuRadius"
			></el-input-number>
		</div>
		<div class="theme-item">
			<span>侧边栏展开宽度</span>
			<el-input-number
				v-model="themeConfig.sideExpandWidth"
				controls-position="right"
				:min="200"
				:step="10"
				class="set-width"
			></el-input-number>
		</div>
		<div class="theme-item">
			<span>头部高度</span>
			<el-input-number v-model="themeConfig.headerHeight" controls-position="right" :min="50" class="set-width"></el-input-number>
		</div>
		<div class="theme-item">
			<span>折叠菜单</span>
			<el-switch v-model="themeConfig.isCollapse" />
		</div>
		<div class="theme-item">
			<span>侧栏颜色反转</span>
			<el-switch v-model="themeConfig.sideBgRevert" />
		</div>
		<div class="theme-item">
			<span>顶栏颜色反转</span>
			<el-switch v-model="themeConfig.headerBgRevert" />
		</div>
		<div class="theme-item">
			<span>面包屑</span>
			<el-switch v-model="themeConfig.breadcrumb" />
		</div>
		<div v-if="themeConfig.breadcrumb" class="theme-item">
			<span>面包屑图标</span>
			<el-switch v-model="themeConfig.breadcrumbIcon" />
		</div>
		<div class="theme-item">
			<span>标签栏</span>
			<el-switch v-model="themeConfig.tabs" />
		</div>
		<div v-if="themeConfig.tabs" class="theme-item">
			<span>标签栏图标</span>
			<el-switch v-model="themeConfig.tabsIcon" />
		</div>
		<div v-if="themeConfig.tabs" class="theme-item">
			<span>标签栏风格</span>
			<el-select v-model="themeConfig.tabsType" class="set-width">
				<el-option v-for="item in TabsTypes" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>
		<div class="theme-item">
			<span>页面切换动画</span>
			<el-select v-model="themeConfig.animateMode" class="set-width">
				<el-option v-for="item in animateModeList" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
		</div>
		<div class="theme-item">
			<span>组件尺寸</span>
			<el-switch v-model="themeConfig.assemblySize" />
		</div>
		<div class="theme-item">
			<span>语言</span>
			<el-switch v-model="themeConfig.language" />
		</div>
		<div class="theme-item">
			<span>搜索菜单</span>
			<el-switch v-model="themeConfig.searchMenu" />
		</div>
		<div class="theme-item">
			<span>消息</span>
			<el-switch v-model="themeConfig.message" />
		</div>
		<div class="theme-item">
			<span>全屏</span>
			<el-switch v-model="themeConfig.fullScreen" />
		</div>
		<div class="theme-item">
			<span>页脚</span>
			<el-switch v-model="themeConfig.footer" />
		</div>
		<!-- 联网配置 -->
		<el-divider class="divider" content-position="center">
			<el-icon><IceCream /></el-icon>
			系统配置
		</el-divider>
		<div class="theme-item">
			<span>侧栏LOGO</span>
			<el-input v-model="themeConfig.sideLogo" placeholder="LOGO地址" class="set-width-plus"></el-input>
		</div>
		<div class="theme-item">
			<span>系统名称</span>
			<el-input v-model="themeConfig.systemTitle" placeholder="系统名称" class="set-width-plus"></el-input>
		</div>
		<div class="theme-item">
			<span>页脚文案</span>
			<el-input v-model="themeConfig.footerText" placeholder="页脚文案" class="set-width-plus"></el-input>
		</div>
		<div class="theme-item">
			<span>页脚链接</span>
			<el-input v-model="themeConfig.footerLink" placeholder="页脚链接" class="set-width-plus"></el-input>
		</div>
		<!-- 主题配置 -->
		<el-divider class="divider" content-position="center">
			<el-icon><IceCream /></el-icon>
			主题配置
		</el-divider>
		<div>
			<div>
				<el-button type="primary" style="width: 100%" @click="onCopy">拷贝当前配置</el-button>
			</div>
			<div style="margin-top: 10px">
				<el-button type="warning" style="width: 100%" @click="onReset">重置当前配置</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useTheme } from '@/hooks/useTheme'
import { GlobalStore } from '@/stores'
import { THEME_CONFIG } from '@/config/config'
import SwitchDark from '@/components/SwitchDark/index.vue'
import mittBus from '@/utils/mittBus'
import { copy } from '@/utils/util'

const { changePrimary, changeGreyOrWeak, switchDark, changeMenuRadius } = useTheme()

// 预定义主题颜色
const colorList = [
	THEME_CONFIG.primary,
	'#DAA96E',
	'#0C819F',
	'#409EFF',
	'#27ae60',
	'#ff5c93',
	'#e74c3c',
	'#fd726d',
	'#f39c12',
	'#9b59b6'
]

const TabsTypes = [
	{ label: '谷歌风格', value: 'chrome' },
	{ label: '普通风格', value: 'normal' },
	{ label: '按钮风格', value: 'button' }
]

const animateModeList = [
	{
		value: 'fade-slide',
		label: '滑动'
	},
	{
		value: 'fade',
		label: '消退'
	},
	{
		value: 'fade-bottom',
		label: '底部消退'
	},
	{
		value: 'fade-scale',
		label: '缩放消退'
	},
	{
		value: 'zoom-fade',
		label: '渐变'
	},
	{
		value: 'zoom-out',
		label: '闪现'
	},
	{
		value: 'none',
		label: '无动画'
	}
]

const globalStore = GlobalStore()
const themeConfig = computed(() => globalStore.themeConfig)

// 切换布局方式
const changeLayout = (val: string) => {
	globalStore.setThemeConfig({ ...themeConfig.value, layout: val })
}

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
	[
		() => themeConfig.value.layout,
		() => themeConfig.value.activeStyle,
		() => themeConfig.value.sideBgRevert,
		() => themeConfig.value.headerBgRevert
	],
	val => {
		const body = document.body as HTMLElement
		const classList = [val[0], val[1]]
		if (val[2]) {
			classList.push('sideBgRevert')
		}
		if (val[3]) {
			classList.push('headerBgRevert')
		}

		body.setAttribute('class', classList.join(' '))
	},
	{ immediate: true }
)

// 打开主题设置
const drawerVisible = ref(false)
mittBus.on('openThemeDrawer', () => (drawerVisible.value = true))

// 复制主题配置项
const onCopy = () => {
	copy(JSON.stringify(themeConfig.value))
	ElMessageBox({
		title: '温馨提示',
		type: 'success',
		message: '复制成功，请替换 src/config/config.ts THEME_CONFIG 属性'
	})
}

// 重置主题配置项
const onReset = () => {
	changeLayout(THEME_CONFIG.layout)
	changePrimary(THEME_CONFIG.primary)
	changeMenuRadius(THEME_CONFIG.menuRadius)
	changeGreyOrWeak(false, 'grey')
	changeGreyOrWeak(false, 'weak')
	globalStore.setThemeConfig({ ...THEME_CONFIG })
	switchDark()
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
